/*
 * Copyright © 2015 Cask Data, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not
 * use this file except in compliance with the License. You may obtain a copy of
 * the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
 * WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
 * License for the specific language governing permissions and limitations under
 * the License.
 */

@import (less) "./fonts.less"; // must be first to support external @import (css)
@import (less) "./variables.less";
@import (less) "../../bower_components/bootstrap/less/mixins.less";

html {
  position: relative;
  min-height: 100%;
}

body {
  visibility: hidden; // themes start the show
  margin-bottom: 80px;
  .dropdown-menu {
    > li > a, > li.dropdown-header { padding-left: 14px; }
    > li > a > span.fa-fw { margin-right: 5px; }
    &.typeahead {
      cursor: default;
      max-height: 200px;
      overflow: auto;
    }
  }
  div.progress { margin: 1px; /* by default they have just margin-bottom: 20px */ }

  main.container {
    margin-top: 90px;
    > div { margin-bottom: 80px; }
    .sidebar {
      ul li a {
        display: block;
        &.abstract {
          &.pull-left { width: 80%; }
          // Create namespace "+"
          + a { display: inline-block; width: 20%; }
        }
      }
    }
  }
}

.caret {
  border-width: 6px 6px 0 6px;
  margin-bottom: 1px;
}

.alerts {
  position: absolute;
  z-index: 999;
  top: 90px;
  left: 0;
  right: 0;
}

body.state-login .alerts {
  top: 0;
}

.modal {
  &.center {
    .modal-dialog {
      position: fixed;
      top: 40%;
      left: 50%;
      min-width: 320px;
      max-width: 630px;
      width: 50%;
      transform: translateX(-50%) translateY(-50%);
    }
  }
  .modal-body {
    max-height: 75vh;
    overflow: auto;
    .alerts {
      position: fixed;
    }
  }
}

.modal-backdrop {
  // see https://github.com/twbs/bootstrap/pull/14724
  z-index: ( @zindex-modal - 1 );
  height: 100%;
}

fieldset {
  &.row { margin-bottom: 1px; }
  &.tab-pane {
    padding-top: 1em;
    &.am-fade.active-add {
      // cf http://mgcrea.github.io/angular-strap/##tabs-usage
      animation-name: fadeIn;
    }
  }
}

span.fa-asterisk {
  color: @brand-danger;
  font-size: 11px;
}

.form-control {
  &.ng-dirty.ng-invalid {
    border-color: #a94442;
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
    &:focus {
      border-color: #843534;
      box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px #ce8483;
    }
    @media (max-width: @screen-xs-max) { margin-bottom: 1px; }
  }
}

span.text-info[bs-tooltip] { cursor: help; }
hr { border-color: lighten(@text-color, 50%); }
.jumbotron { margin-top: 1em; }
.nav-tabs > li > a { cursor: pointer; }

footer {
  font-size: 14px;
  position: absolute;
  bottom: 0;
  z-index: 1400;
  width: 100%;
  > .container { padding-right: 15px; padding-left: 15px; }
  div.text-muted {
    margin: 10px 0;

    > div {
      @media (min-width: @screen-md-max) {
        &:first-child { text-align: left; }
        &:last-child { text-align: right; }
      }
      @media (max-width: @screen-md-max) { text-align: center; }
    }
  }
  img {
    height: 26px;
    width: 26px;
    margin-right: 8px;
  }
  p, ul { height: 32px; margin: 0; }
  span, li { line-height: 32px; vertical-align: middle; }
}

.mapreduce-components {
  margin-top: 15px;

  .run-status-box {
    background: darken(white, 10%);
    margin-left: 0;
    border-radius: 4px;

    .item {
      border-right: 1px solid #93969F;
      min-height: 60px;
      padding-top: 15px;
      text-align: left;

      &:last-child {
        border-right: 0;
      }

    }
  }

  .component-box {
    .task-item {
      width: 12.5%;
      float: left;
      padding-left: 15px;
      padding-right: 15px;
      text-align: center;
    }
  }

}

.breadcrumb {
  margin: 0;
  padding: 0;
}

[cdap-object-heading] {
  margin-top: 20px;
}
